<script>
import EditPosition from "@/views/map/dialog/MapEditElement/EditOption/EditPosition.vue";

export default {
  name: "EditPositions",
  components: {EditPosition},
  props: {
    "positions": Array,
  },
  methods: {
    /**
     * 打开index的编辑状态
     * @param index
     */
    openEdit(index){
      let data = []
      data[index] = true
      this.showAddPosition.splice(0,this.showAddPosition.length,...data)
    },
    //关闭编辑状态
    closeEdit(){
      let data =[]
      this.showAddPosition.splice(0,this.showAddPosition.length,...data)
    },
    /**
     * 打开新增或编辑坐标点状态
     * @param index 坐标点的位置
     * @param isAddPosition true：添加坐标点；false：编辑坐标点
     */
    openAddEdit(index,isAddPosition=true){
      console.log(index)
      this.openEdit(index)
      this.isAddPosition=isAddPosition;
    },
    /**
     * 删除index个坐标
     * @param index 需要删除点的坐标
     */
    deletePosition(index){
      this.positions.splice(index,1)
    },
    //保存编辑的结果
    savePosition(position){
      let index =this.getAddPositionIndex
      if(this.isAddPosition) {
        this.positions.splice(index, 0, position)//保存插入点
        console.log(position,"add in :",index)
      }else{
        this.positions.splice(index, 1, position)//保存编辑点
        console.log(position,"edit in :",index)
      }
      this.closeEdit()
    },
    //取消编辑
    cancelEdit(){
      this.closeEdit()
    },

    /**
     * 查询添加或修改的index是否为编辑状态
     * @param index 查询是否为编辑状态
     * @param isAdd true查询添加；false查讯修改
     * @returns {boolean}
     * @constructor
     */
    IsAddPositionByIndex(index,isAdd=true){
      if(isAdd)
        return this.isAddPosition&&(this.showAddPosition[index]?this.showAddPosition[index]:false)
      else
        return (!this.isAddPosition)&&(this.showAddPosition[index]?this.showAddPosition[index]:false)
    },
    isAPoint(position){
      if(Array.isArray(position)&&
          position.length>0&&
          !Array.isArray(position[0])&&
          !Array.isArray(position[1]))
        return true;
      if(Array.isArray(position)&&
          position.length>0&&
          Array.isArray(position[0]))
        return false;
      throw new Error(`${JSON.stringify(position)} isn't a path`);
    }
  },
  computed: {
    /**
     * 返回修改坐标的index
     * @returns {number}
     */
    getAddPositionIndex(){
      return this.showAddPosition.findIndex(flag=>flag===true)
    },
    isSinglePolygon(positions){
      if(Array.isArray(positions)&&
          Array.isArray(positions[0])&&
          positions[0].length>0
          /*&&
          !Array.isArray(positions[0][0])&&
          !Array.isArray(positions[0][1])*/
      )
        return true;
      if(Array.isArray(positions)&&
          Array.isArray(positions[0])&&
          Array.isArray(positions[0][0]))
        return false;
      throw new Error(`${JSON.stringify(positions)} isn't a path`);
    },
  },
  data(){
    return{
      //添加或者修改坐标点的位置，添加
      showAddPosition:[],
      //是否为添加坐标点，true在getAddPositionIndex处[添加坐标点]，false在getAddPositionIndex处[修改坐标点]
      isAddPosition: true,
    }
  }
}
</script>

<template>
 <div>

    <span v-for="(tag,index) in positions">
<!--      添加坐标点-->
      <EditPosition
          v-if="IsAddPositionByIndex(index,true)"
          @save="savePosition"
          @cancel="cancelEdit"
      ></EditPosition>
      <el-button v-else
                 class="button-new-tag" size="small"
                 style="margin-bottom: 10px;"
                 @click="openAddEdit(index,true)">+</el-button>
      <!--      现有坐标点-->
      <div  v-if="IsAddPositionByIndex(index,false)">
        <EditPosition v-if="isAPoint(tag)"
                      @save="savePosition"
                      @cancel="cancelEdit"
                      :edit-position="tag"
        ></EditPosition>
        <EditPositions v-else :positions="tag"/>
      </div>

      <el-tag v-else
              :key="tag"
              :closable="getAddPositionIndex===-1"
              :disable-transitions="false"
              style="margin-bottom: 10px;"
              @click="openAddEdit(index,false)"
              @close="deletePosition(index)"
      >{{tag}}</el-tag>
    </span>
     <!--    在末尾添加点-->
     <EditPosition
         v-if="IsAddPositionByIndex(positions.length,true)"
         @save="savePosition"
         @cancel="cancelEdit"
     ></EditPosition>
     <el-button
         v-else
         class="button-new-tag"
         size="small"
         @click="openAddEdit(positions.length,true)"
     >
       +
     </el-button>


 </div>
</template>

<style scoped>

</style>